<template>
	<view :style="{ paddingBottom: bottomHeight + 'px' }">
		<view class="d-flex a-center choose-title">
			<view class="span-15 d-flex j-sa">
				<view class="d-flex a-center" v-for="(item,index) in screen.list" :key="index">
					<view :class="screen.currentIndex==index?'main-text-color':''" @click="changeIndex(index)">
						{{item.title}}
					</view>
					<view class="choose-icon">
						<view class="iconfont icon-sort-up-full line-h0" :class="item.status==1?'main-text-color':''">
						</view>
						<view class="iconfont icon-sort-down-full line-h0" :class="item.status==2?'main-text-color':''">
						</view>
					</view>
				</view>
			</view>
			<view class="span-5 text-center" @click="showDrawer">
				筛选
			</view>
		</view>
		<uni-drawer ref="showRight" mode="right" :mask-click="true" :width="260">
			<scroll-view style="height: 100%;" scroll-y="true">
				<view class="mt-5 pt-5">
					<color-tag v-for="(item,c) in label.list" :key="c" :item="item" :bool="label.selected==c"
						@click.native="changeBg(c)"></color-tag>
				</view>
			</scroll-view>
		</uni-drawer>
		<template v-if="isShow">
			<view class="py-3 text-center">
				<image src="../../static/loading.gif" mode="" style="width:120rpx;height:120rpx"></image>
			</view>
		</template>
		<template v-if="!isShow">
			<template v-if="listWrapper.length>0">
				<searchcon-list v-for="(item,l) in listWrapper" :key="l" :item="item"></searchcon-list>
				<view class="text-center text-muted mt-1">{{loadmore}}</view>
			</template>
			<template v-else>
				<view class="text-center text-muted mt-3">暂无数据</view>
			</template>
		</template>
	</view>
</template>

<script>
	import {
		getChoose
	} from '../../api/index.js'
	export default {
		data() {
			return {
				bottomHeight:'',
				listWrapper:[],
				loadmore: '加载更多…',
				isShow: true,
				list: [],
				title: '',
				page: 1,
				screen: {
					currentIndex: 0,
					list: [{
							title: '综合',
							status: 1, //  1上的红色   2下的红色  0 两个都没有颜色
							key: 'all'
						},
						{
							title: '销量',
							status: 0,
							key: 'sale_count'
						},
						{
							title: '价格',
							status: 0,
							key: 'min_price'
						}
					]
				},
				label: {
					selected: 0,
					list: [{
							name: '不限',
							rule: false,
							value: false,
						},
						{
							name: '100-200',
							rule: 'between',
							value: '100,200',
						},
						{
							name: '200-300',
							rule: 'between',
							value: '200,300',
						},
						{
							name: '300-400',
							rule: 'between',
							value: '300,400',
						},
						{
							name: '400以上',
							rule: '>',
							value: '400',
						}
					]
				}
			}
		},
		onLoad(e) {
			console.log('ee', e);
			this.title = e.key
			this.bottomHeight = getApp().globalData.bottomHeight
			console.log('this.bottomHeight',this.bottomHeight);
		},
		mounted() {
			this.getchoose()
		},
		computed: {
			options() {
				let obj = this.screen.list[this.screen.currentIndex];
				let value = obj.status == 1 ? 'asc' : 'desc'
				return {
					[obj.key]: value
				}
			}
		},
		onPullDownRefresh() {
			this.getchoose(true, () => {
				uni.showToast({
					title: '下拉刷新成功'
				})
			})
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 2000)
		},
		onReachBottom() {
			if (this.loadmore == '没有更多了…') {
				return;
			} else {
				this.page++;
				this.getchoose(false, () => {
					uni.showToast({
						title: '上拉加载成功…'
					})
				})
			}
		},
		methods: {
			getchoose(refresh = true, callback = false) {
				let ppage = refresh ? 1 : this.page
				//下拉刷新：覆盖当前的第一页
				//上拉加载：加载第二页乃至后面页面的数据
				getChoose({
					title: this.title,
					page: ppage,
					...this.options,
					...this.getCondition()
				}).then(res => {
					console.log('res', res);
					this.list = refresh ? [...res.data] : [...this.list, ...res.data];
					this.listWrapper = this.formatter(this.list)
					this.loadmore = res.data.length < 6 ? '没有更多了…' : '加载更多…'
					this.isShow = false;
					if (typeof callback == 'function') {
						callback()
					}
				})
			},
			formatter(res) {
				return res.map(item => {
					let good_nums = (item.comments_good_count / item.comments_count) * 100
					return {
						title: item.title,
						titlepic: item.cover,
						desc: item.desc,
						pprice: item.min_price,
						comment_num: item.comments_count,
						good_num: good_nums.toFixed(2) + '%'
					}
				})
			},
			getCondition() {
				let obj = this.label.list[this.label.selected];
				return obj.rule && obj.value ? {
					price: `${obj.rule},${obj.value}`
				} : ''
			},
			changeIndex(index) {
				//老的状态== 上下切换    和新的状态=左右切换
				let oldIndex = this.screen.currentIndex;
				let oldItem = this.screen.list[oldIndex];
				if (index == oldIndex) {
					oldItem.status = oldItem.status == 1 ? 2 : 1;
					this.getchoose()
					return;
				} else {
					let newItem = this.screen.list[index];
					this.screen.currentIndex = index;
					newItem.status = 1;
					oldItem.status = 0;
					this.getchoose();
					return;
				}

			},
			//切换抽屉中的按钮背景颜色
			changeBg(c) {
				this.label.selected = c
				this.getchoose()
			},
			//抽屉
			showDrawer() {
				this.$refs.showRight.open();
			},
			closeDrawer() {
				this.$refs.showRight.close();
			}
		}

	}
</script>
<style scoped>
	.choose-title {
		width: 750rpx;
		height: 88rpx;
		background-color: #fff;
		z-index: 9999;
		position: sticky;
		top: 0;
		left: 0;
	}
</style>